<script setup>
import {getCurrentInstance,watch} from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps(['loading','playCount','url','id','artistName','name',])
const {proxy } = getCurrentInstance()
const router = useRouter()
let id = props.id
watch(()=>props.id,(n,o)=>{
  id=n
})
function goPlayview(){
    proxy.$https.getMvUrl({id:id})
   .then(res=>{
    if(res.data.code==200){
    sessionStorage.setItem("mvUrl",res.data.data.url)
    router.push({name:"mvplay",params:{id:id},query:{imgurl:props.url}})
}
})
    
}
</script>

<template>
   
     <el-skeleton style="width: 300px" :loading="props.loading" animated>
      <template #template>
        <el-skeleton-item variant="image" style="width: 300px; height: 170px;margin-right: 30px" />
        <div style="padding: 14px">
          <el-skeleton-item variant="h3" style="width: 50%" />
          <div
            style=" display: flex;align-items: center;justify-items: space-between;margin-top: 16px;height: 16px;">
            <el-skeleton-item variant="text" style="margin-right: 16px" />
          </div>
        </div>
      </template>
      <template #default>
        <div class="demo-image__lazy" :id="props.id"  @click="goPlayview()">
            <p>
              <el-icon><VideoPlay /></el-icon>
              <span>{{ props.playCount }}</span>
            </p>
            <el-image :src="props.url" lazy />
            <div>{{ props.name }}</div>
            <div class="small"> {{ props.artistName }}</div>
        </div>
      </template>
    </el-skeleton>

</template>
    
<style scoped>
.demo-image__lazy{
    width: 300px;
    position: relative;
    cursor: pointer;
    margin-bottom: 15px;
    
}
.demo-image__lazy .el-image{
  width: 300px;
  height: 170px;
}
.demo-image__lazy p{
    display: flex;
    align-items: center;
    position: absolute;
    right: 5px;
    top: 3px;
    z-index: 1;
    color: white;
    
}
.el-image{
    border-radius: 5px;
}

.small{
  font-size: 12px;
  color: #ccc;
}
.card{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
</style>